<template>
  <div class="panel">
    <div
      v-for="(item, index) in tabVlaue"
      :key="index"
      @click="setCruuent(item.id)"
      class="item-box hw-click-cursor hw-flex-style-c-c-c"
      :class="{ 'item-box-active': item.id == props.modelValue }"
    >
      <img :src="item.img + ''" alt="" />
      <p style="font-family: PingFangSC-Regular, PingFang SC Microsoft YaHei">{{ item.name }}</p>
      <div class="solid-box"></div>
    </div>
  </div>
</template>

<script setup lang="ts">
// @ts-nocheck
import { ref, computed, watch } from 'vue';
import { useRoute } from 'vue-router';
import { urls } from '@/utils/request/upload';
import { tabList, tabList2 } from '../../data';
import { useProjectStore } from '@/store';

const route = useRoute();
const store = useProjectStore();
const props = defineProps({
  modelValue: {
    type: Number,
  },
});
const emit = defineEmits(['update:modelValue']);

const setCruuent = (e: Number) => {
  emit('update:modelValue', e);
};
// watch(
//   route,
//   () => {
//     console.log(route.meta.templateId);
//   },
//   { deep: true },
// );
const tabVlaue = computed(() => {
  if (
    route.meta.templateId == 395741054230597 ||
    route.meta.templateId == 410276243316805 ||
    route.meta.templateId == 666 ||
    route.meta.templateId == 123456789 ||
    route.meta.templateId == 99999 ||
    route.meta.templateId == 1010 ||
    route.meta.templateId == 888 ||
    route.meta.templateId == 1997
  ) {
    return tabList2;
  } else {
    return tabList;
  }
});
</script>

<style lang="less" scoped>
.panel {
  width: 100%;
  height: 100%;
}
:deep(.t-collapse-panel__content) {
  padding-bottom: 16px;
}
.item-box {
  position: relative;
  padding: 8px 12px;
  border-radius: 4px;
  margin-bottom: 8px;
  p {
    font-size: 16px;
    text-align: center;
    font-weight: 500;
    color: #fff;
    line-height: 24px;
  }
  img {
    width: 24px;
    height: 24px;
  }
  .solid-box {
    display: none;
    position: absolute;
    bottom: -8px;
    margin: 0 auto;
    width: 24px;
    height: 16px;
    box-shadow: inset 0px -1px 0px 0px rgba(230, 230, 230, 0.5);
  }
}
.item-box-active {
  background: #3e3c3b;
  p {
    text-align: center;
    font-weight: 500;
    // color: #333;
    line-height: 24px;
  }
}
.item-box:hover {
  background: #3e3c3b;
}
.title2 {
  font-size: 16px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #333333;
  line-height: 24px;
}
</style>
